<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const  app=Vue.createApp({
            setup(){
                const {ref,reactive,toRefs,watch,toRef}=Vue;
                let nameOpj=reactive({name:'a'});
                // let nameOpj={name:'a'};
                watch(()=>nameOpj.name ,(currentValue,prevValue)=>{
                    console.log(currentValue,prevValue)
                })   
                const {name}=toRefs(nameOpj)
                // const {name}=nameOpj
                return{nameOpj,name};
            },
            template:`<div>Name:<input v-model='name' /></div> <div>My name is {{name}}</div>`
        })
        app.mount('#root');
    </script>
</body>
</html>